﻿<template>
  <div>
    <!-- 标题栏 -->
    <NavBar
      :title="$route.meta.title"
      :rightBtn="rightBtn"
      @handleIcon="hanldleRight"
    >
    </NavBar>
    <van-search
      v-model="queryParam.keyword"
      placeholder="关键字"
      @search="getDataList"
    >
    </van-search>
    <van-pull-refresh v-model="loading" @refresh="getDataList">
      <tree-item
        :treeData="data"
        @handleEdit="handleEdit"
        @handleDelete="handleDelete"
        @handleAdd="handleAdd"
      ></tree-item>
    </van-pull-refresh>
    <van-pagination
      v-model="pagination.current"
      :total-items="pagination.total"
      :show-page-size="pagination.pageSize"
      @change="getDataList"
    >
      <template #prev-text>
        <van-icon name="arrow-left" />
      </template>
      <template #next-text>
        <van-icon name="arrow" />
      </template>
      <template #page="{ text }">{{ text }}</template>
    </van-pagination>

    <edit-form ref="editForm" :afterSubmit="getDataList"></edit-form>
  </div>
</template>

<script>
import {
  Base_Department_GetTreeDataList,
  Base_Department_DeleteData
} from "@/api/Base_Manage/Base_Department";
import NavBar from "@/components/NavBar";
import EditForm from "./EditForm";
import { mapGetters } from "vuex";
import TreeItem from "./TreeItem";

export default {
  components: {
    NavBar,
    EditForm,
    TreeItem
  },
  mounted() {
    this.getDataList();
    if (this.hasPerm("Base_Department.Add")) {
      this.rightBtn.number++;
      this.rightBtn.iconName.unshift("plus");
    }
  },
  data() {
    return {
      data: [],
      pagination: {
        current: 1,
        pageSize: 10,
        showTotal: (total, range) =>
          `总数:${total} 当前:${range[0]}-${range[1]}`
      },
      filters: {},
      sorter: { field: "Id", order: "asc" },
      loading: false,
      queryParam: {},
      visible: false,
      selectedRowKeys: [],
      rightBtn: {
        number: 0,
        iconName: []
      }
    };
  },
  computed: {
    ...mapGetters(["hasPerm"])
  },

  methods: {
    getDataList() {
      this.selectedRowKeys = [];

      this.loading = true;
      Base_Department_GetTreeDataList({
        PageIndex: this.pagination.current,
        PageRows: this.pagination.pageSize,
        SortField: this.sorter.field || "Id",
        SortType: this.sorter.order,
        Search: this.queryParam,
        ...this.filters
      }).then(resJson => {
        this.loading = false;
        this.data = resJson.Data;
        const pagination = { ...this.pagination };
        pagination.total = resJson.Total;
        this.pagination = pagination;
      });
    },
    hanldleRight(item) {
      if (item === "plus") {
        this.handleAdd(null);
      }
    },
    handleAdd(id) {
      this.$refs.editForm.add(id);
    },
    handleEdit(id) {
      this.$refs.editForm.edit(id);
    },
    handleDelete(ids) {
      var thisObj = this;

      this.$dialog
        .confirm({
          title: "确认删除吗?"
        })
        .then(() => {
          // on confirm
          Base_Department_DeleteData(ids).then(resJson => {
            if (resJson.Success) {
              this.$toast.success("操作成功");
              this.getDataList();
            } else {
              this.$toast.fail(resJson.Msg);
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    openExpand(m) {
      m.isExpand = !m.isExpand;
    }
  }
};
</script>

<style lang="less"></style>
